<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- {{count}} -->
        当前的数字是：{{$store.state.count}}
        {{$store.getters.formatCount}}
        <sum-number></sum-number>
        <reduce-number></reduce-number>
    </div>
    <script src="./vue.js"></script>
    <script src="./vuex.js"></script>
    <script>
        Vue.component('sum-number',{
            template:`
                <div>
                    <h1>当前加一后的数字是：{{$store.state.count}}</h1>
                    <button @click="add">加一</button>
                </div>
            `,
            methods:{
                add(){
                    this.$store.commit('add',1);
                    this.$store.dispatch('getData',[1,2]);
                }
            }
        })

        Vue.component('reduce-number',{
            template:`
                <div>
                    <h1>当前减一后的数字是：{{$store.state.count}}</h1>
                    <button @click="reduce">减一</button>
                </div>
            `,
            methods:{
                reduce(){
                    this.$store.commit('reduce',5);
                }
            }
        })


        console.log(Vuex)

        let store = new Vuex.Store({
            state:{  //维护的是应用共享的状态（数据），类似于vue实例里的data
                 count:1   
            },
            mutations:{ //放的是修改state数据的方法，这些方法通过commit方法去调用
                add(state,num){
                    state.count += num;
                    console.log(this.state === state);
                },
                reduce(state,num){
                    state.count -= num;
                }
            },
            getters:{
                formatCount(state,two){
                    console.log(store.getters === two);
                    return `--${state.count}--`
                }
            },
            actions:{ //异步任务
                getData(context,num1){
                    console.log("actions",context);
                    console.log(num1)
                    setTimeout(() => {

                    },2000)
                }
            }
        })

        let vm = new Vue({
            el:'#app',
            data:{
                // count:1
            },
            store
        })
    </script>
</body>
</html>